<template>
<div class="page-bill-source">
  <div class="bill-source">
    <div class="bill-title">溯源文件</div>
    <ul>
      <li v-for="(TraceFile,index) in handleTraceData">
        <div class="file-box"  >
          <img v-if="TraceFile.fileType ==1" preview :preview="TraceFile.timestamp" :src="TraceFile.urlM"  :large="TraceFile.url" alt="" :preview-text="TraceFile.fileClassDisplay">
          <span v-else class="other-file" @click="downloadFile(TraceFile.name, TraceFile.url)">
            <i class="icon maliiconfont maliicon-wenjian1"></i>
          </span>
        </div>
        <p v-if="TraceFile.fileClass ==1">{{TraceFile.fileClassDisplay}}({{TraceFile.goodsName}})</p>
        <p v-if="TraceFile.fileClass !=1">{{TraceFile.fileClassDisplay}}</p>
      </li>
    </ul>
  </div>
  <div class="bill-goods">
    <div class="bill-title">货物照片</div>
    <ul>
      <li v-for="(GoodsFile, index) in handleGoodsData" >
        <div class="goods-pic-box">
          <img v-if="GoodsFile.fileType ==1" preview preview="goodsGroup" :src="GoodsFile.urlM" :large="GoodsFile.url"  alt="" :preview-text="GoodsFile.goodsName">
          <!--<span class="mask-title">查看大图</span>-->
          <!--<i class="icon maliiconfont maliicon-img_big_picture"></i>-->
          <!--<span class="mask" @click="showBig"></span>-->
        </div>
        <p>{{GoodsFile.goodsName}}</p>
      </li>
    </ul>
  </div>
</div>
</template>
<script>
export default {
  props: ['wmsWrTraceFileList', 'wmsWrGoodsFileList'],
  data () {
    return {
      handleGoodsData: [],
      handleTraceData: []
    };
  },
  created () {
    this.handleGoodsFile();
    this.handleTraceFile();
  },
  methods: {
    handleGoodsFile () {
      let len = this.wmsWrGoodsFileList.length;
      if (len === 0) {
        return;
      }
      let handleData = [];
      for (var i = 0; i < len; i++) {
        if (this.wmsWrGoodsFileList[i].wmsWrFileList) {
          for (var j = 0; j < this.wmsWrGoodsFileList[i].wmsWrFileList.length; j++) {
            let goodsFileObj = {};
            goodsFileObj.goodsId = this.wmsWrGoodsFileList[i].wmsWrFileList[j].goodsId;
            goodsFileObj.fileType = this.wmsWrGoodsFileList[i].wmsWrFileList[j].fileType;
            goodsFileObj.url = this.wmsWrGoodsFileList[i].wmsWrFileList[j].url;
            goodsFileObj.urlM = this.wmsWrGoodsFileList[i].wmsWrFileList[j].urlM;
            goodsFileObj.goodsName = this.wmsWrGoodsFileList[i].wmsWrFileList[j].goodsName;
            handleData.push(goodsFileObj);
          }
        }
      };
      this.handleGoodsData = handleData;
    },
    handleTraceFile () {
      let len = this.wmsWrTraceFileList.length;
      if (len === 0) {
        return;
      }
      let handleData = [];
      for (var i = 0; i < len; i++) {
        if (this.wmsWrTraceFileList[i].wmsWrFileList) {
          for (var j = 0; j < this.wmsWrTraceFileList[i].wmsWrFileList.length; j++) {
            let traceFileObj = {};
            let timestamp = new Date().getTime();
            traceFileObj.timestamp = timestamp + Math.floor(Math.random() * 10000);
            traceFileObj.fileType = this.wmsWrTraceFileList[i].wmsWrFileList[j].fileType;
            traceFileObj.name = this.wmsWrTraceFileList[i].wmsWrFileList[j].name;
            traceFileObj.url = this.wmsWrTraceFileList[i].wmsWrFileList[j].url;
            traceFileObj.urlM = this.wmsWrTraceFileList[i].wmsWrFileList[j].urlM;
            traceFileObj.fileClass = this.wmsWrTraceFileList[i].wmsWrFileList[j].fileClass;
            traceFileObj.fileClassDisplay = this.wmsWrTraceFileList[i].wmsWrFileList[j].fileClassDisplay;
            traceFileObj.goodsName = this.wmsWrTraceFileList[i].wmsWrFileList[j].goodsName;
            handleData.push(traceFileObj);
          }
        }
      };
      this.handleTraceData = handleData;
    },
    downloadFile (name, url) {
      let link = document.createElement('a');
      link.style.display = 'none';
      window.open(url);
      link.setAttribute('download', name);
      document.body.appendChild(link);
      link.click();
    },
    showBig () {}
  }
};
</script>
<style>
.page-bill-source .bill-title{
  position:relative;
  font-size:18px;
  text-align:center;
  margin-bottom:24px;
  margin-top:20px;
}
.page-bill-source .bill-title:before{
  content:'';
  position: absolute;
  width:240px;
  height:1px;
  border-top:1px solid #dddddd;
  top:8px;
  left:160px;
}
.page-bill-source .bill-title:after{
  content:'';
  position: absolute;
  width:240px;
  height:1px;
  border-top:1px solid #dddddd;
  top:8px;
  right:160px;
}
.page-bill-source .bill-source ul li{
  display: inline-block;
  width:225px;
  height:306px;
  border:1px solid #e6e6e6;
  text-align: center;
  margin-right:14px;
  cursor: pointer;
  margin-bottom:30px;
}
.page-bill-source .bill-source ul li .file-box{
  width:185px;
  height:242px;
  border:1px solid #e6e6e6;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin:0 auto;
  margin-top:20px;
  position: relative;
}
.page-bill-source .bill-source ul li .file-box img{
  width:100%;
  height:240px;
  object-fit: cover;
}
.page-bill-source .bill-source ul li p{
  font-size:18px;
  margin-top:12px;
}
.page-bill-source .bill-source ul li:last-child{
  margin-right:0;
}
.page-bill-source  .bill-goods{
    margin-top:50px;
}
.page-bill-source  .bill-goods ul li{
  width:183px;
  height:290px;
  display: inline-block;
  cursor: pointer;
  margin-right:10px;
}
.page-bill-source  .bill-goods ul li:nth-child(5n){
  margin-right:0;
}
.page-bill-source  .bill-goods ul li .goods-pic-box{
  width:186px;
  height:234px;
  position: relative;
  cursor: pointer;
}
.page-bill-source  .bill-goods ul li .goods-pic-box img{
  width:100%;
  height:234px;
  object-fit: cover;
}
.page-bill-source  .bill-goods ul li .goods-pic-box .mask{
  background:rgba(0,0,0,0.5);
  display: block;
  position: absolute;
  top:0;
  left:0;
  text-align: center;
  width:186px;
  height:234px;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 5;
  display: none;
}
.page-bill-source  .bill-goods ul li .goods-pic-box .mask-title{
  color:#fff;
  display: block;
  position: absolute;
  top:130px;
  left:0;
  text-align: center;
  width:186px;
  height:30px;
  font-size:18px;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 8;
  display: none;
}

.page-bill-source  .bill-goods ul li .goods-pic-box .maliiconfont{
  color:#fff;
  font-size:60px;
  position: absolute;
  top:60px;
  left:64px;
  z-index: 9;
  display: none;
}
.page-bill-source  .bill-goods ul li:hover .mask{
  display: block;
}
.page-bill-source  .bill-goods ul li:hover .mask-title{
  display: block;
}
.page-bill-source  .bill-goods ul li:hover .maliiconfont{
  display: block;
}
.page-bill-source  .bill-goods ul li .goods-pic-box {
  border:1px solid #e6e6e6;
}
.page-bill-source  .bill-goods ul li p{
  font-size: 16px;
  line-height:60px;
  text-align: center;
}
.page-bill-source  .bill-goods{
  margin-bottom:50px;
}
.page-bill-source  .bill-goods ul li .goods-pic-box .other-file{
  width:186px;
  height:234px;
  text-align: center;
  display: inline-block;
}
.page-bill-source  .bill-goods ul li .goods-pic-box .other-file .maliiconfont{
  color:#999999;
  margin-top:20px;
}
.page-bill-source .file-box .maliiconfont{
  font-size: 60px;
  position: absolute;
  top: 60px;
  left: 64px;
  z-index: 9;
  color: #999999;
  margin-top: 20px;
}
.page-bill-source .bill-goods ul{
  margin-top:30px;
}
</style>
